<template>
  <el-row>
    <Title :saying="saying">
      <h1 slot="title">{{ msg }}</h1>
    </Title>
    <Information>
      <el-row class="bj">
        <svg :width='width' :height='height' @mousemove='listener($event)'>
          <a :href="tag.href" v-for='tag in tags'>
            <text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text>
          </a>
        </svg>
      </el-row>
    </Information>
  </el-row>
</template>

<script>
import Title from "./Title.vue";
import Information from "./Information.vue";
export default {
  name: "Skill",
  data() {
    return {
      msg: "职业技能",
      saying: "铭记天道酬勤，天下何事难为！",
      infors: [],
      width:700,
      height:500,
      tagsNum:20,
      RADIUS:200,
      speedX:Math.PI/360,
      speedY:Math.PI/360,
      tags: []
    };
  },
  components: { Title, Information },
  computed:{
    CX(){
      return this.width/2;
    },
    CY(){
      return this.height/2;
    }
  },
  methods: {
    skills() {
      this.$Sev.post("/api/skill", {}, (data) => {
        data.forEach((element) => {
          this.infors.push({
            name: element["name"],
            jn: element["jn"],
          });
        });
        let tags=[];
        this.tagsNum = this.infors.length;
        for(let i = 0; i < this.tagsNum; i++){
          let tag = {};
          let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
          let a = Math.acos(k);
          let b = a * Math.sqrt(this.tagsNum * Math.PI);
          let skill = this.infors[i];
          tag.text = skill.name;
          tag.x = this.CX +  this.RADIUS * Math.sin(a) * Math.cos(b);
          tag.y = this.CY +  this.RADIUS * Math.sin(a) * Math.sin(b);
          tag.z = this.RADIUS * Math.cos(a);
          tag.href = skill.jn
              // 'https://imgss.github.io';
          tags.push(tag);
        }
        this.tags = tags;
      });
    },
    rotateX(angleX){
      var cos = Math.cos(angleX);
      var sin = Math.sin(angleX);
      for(let tag of this.tags){
        var y1 = (tag.y- this.CY) * cos - tag.z * sin  + this.CY;
        var z1 = tag.z * cos + (tag.y- this.CY) * sin;
        tag.y = y1;
        tag.z = z1;
      }
    },
    rotateY(angleY){
      var cos = Math.cos(angleY);
      var sin = Math.sin(angleY);
      for(let tag of this.tags){
        var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
        var z1 = tag.z * cos + (tag.x-this.CX) * sin;
        tag.x = x1;
        tag.z = z1;
      }
    },
    listener(event){//响应鼠标移动
      var x = event.clientX - this.CX;
      var y = event.clientY - this.CY;
      this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-this.RADIUS*0.00002, x*0.0001);
      this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-this.RADIUS*0.00002, y*0.0001);
    }
  },
  mounted() {
    this.skills();
    setInterval(() => {
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
    }, 17)
  },
};
</script>
<style scoped>
.el-image {
  width: 30%;
  padding: 5%;
}
.el-tag {
  margin: 20px;
  font-size: 20px;
}
</style>